let layer = layui.layer
let form = layui.form
getArticleCate()
function getArticleCate() {
  
axios.get('/my/article/cates')
// .then((res)=>{console.log(res);})
.then(({data:{data}}) => {
    // console.log(res)
let htmlStr = data
.map(({name,Id,alias})=>{
    return`
    <tr>
    <td>${name}</td>
    <td>${alias}</td>
    <td>
      <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id=${Id}>编辑</button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id=${Id}>删除</button>
    </td>
  </tr>
    `
}).join('')
$("#tbody").html(htmlStr)
})
}
// 弹出层
let indexAddForm
$('#btnAddCate').on('click',function () {
  let addFormStr = `<form id="addForm" class="layui-form">
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
    </div>
</form>`

  indexAddForm=  layer.open({
        type:1,
        content:addFormStr,
        title:'添加图书类别',
        area:['500px','250px'],
        shade:[0.8,'#393D49']
  });
 
})
$('body').on('submit','#addForm',function(e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/addcates',data).then(({data:{status,message}})=>{
    if (status!==0) {
      return layer.msg(message)
      
    }
    layer.close(indexAddForm)
    getArticleCate()
    layer.msg('添加成功')
  })
  
})

// 编辑弹出层
let  editFormStrIndex
$('body').on('click','.btn_edit',function () {
const Id = $(this).attr('data-id')
axios.get('/my/article/cates/'+Id).then((res)=>{

form.val('editForm',res.data.data)
})
  let editFormStr = `<form id="editForm" class="layui-form" lay-filter="editForm" >
  <div class="layui-form-item layui-hide">
                <label class="layui-form-label">id名称</label>
                <div class="layui-input-block">
                  <input type="text" name="Id" required  lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
    </div>
</form>`;

  editFormStrIndex = layer.open({
  content: editFormStr,
  type:1,
  title:'修改文章类别',
  area:['500px','250px'],
  shade:[0.8,'#393D49']


});
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       
        
})
$('body').on('submit','#editForm',function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post("/my/article/updatecate",data).then(({data:{status,message}})=>{
    if (status!==0) {
      return layer.msg(message)
      
    }
    layer.close(editFormStrIndex)
    getArticleCate()
    layer.msg('添加成功')
  })
  
})
// 删除
$('#tbody').on('click','.btn_delete',function () {
  let id = $(this).attr('data-id')
  axios.get('/my/article/deletecate/'+Id).then(({data:{status,message}})=>{
if (status!==0) {
  return layer.msg(message)
  
}
layer.msg(message)
getArticleCate()
  })
})
